<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<template>
  <div class="wk-base-detail">
    <CreateSections v-for="(mainItem, mainIndex) in list" :key="mainIndex"
                    :title="mainItem.name"
                    :dropdown-items="dropdownItems"
                    class="wk-base-detail__section"
                    content-height="auto"
                    @command-select="sectionCommandSelect">
      <WkBaseDetailSection :list="mainItem.list"/>
      <template v-slot:header>
        <div class="wk-base-detail__more">
          <slot name="more"/>
        </div>
      </template>
      <slot/>
    </CreateSections>
  </div>
</template>

<script>
import CreateSections from '/src/components/CreateSections.vue'
import WkBaseDetailSection from './WkBaseDetailSection.vue'

export default {
  // 基本详情
  name: 'WkBaseDetail',
  components: {
    CreateSections,
    WkBaseDetailSection
  },
  props: {
    list: Array,
    dropdownItems: Array
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
  },

  beforeDestroy() {
  },
  methods: {
    sectionCommandSelect(type) {
      this.$emit('top-command-select', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.wk-base-detail {
  &__section {
    margin-top: 25px;
  }

  :deep(.create-sections-content) {
    padding: 0 20px;
  }

  &__more {
    position: absolute;
    right: 15px;
  }
}
</style>
